<template>
  <div class="AlarmInf borderStyle">
    <div class="blueTitleStyle">告警信息</div>
    <div
      class="AlarmInf-con"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div class="AlarmInf-con-total">
        <div class="pie">
          <v-chart class="single-bar" :options="option" :auto-resize="true" />
        </div>
        <div>
          <div>告警总数</div>
          <div class="AlarmInf-con-rnumfont rnumfont">
            {{total}}
            <span>个</span>
          </div>
        </div>
        <div></div>
      </div>
      <div v-for="(item, index) in AlarmInfData" :key="index" @click="clickEvent(item)">
        <div class="AlarmInf-rnumfont rnumfont">{{item.value}}</div>
        <div class="AlarmInf-name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";

interface AlarmInfType {
  name: string;
  type: string;
  value: string;
}

@Component
export default class AlarmInf extends Vue {
  @Prop()
  countMap;
  loading: boolean = false;
  option = {
    tooltip: {
      show: false,
    },
    grid: {
      top: "1%",
      bottom: "0%",
      left: "9%",
    },
    xAxis: {
      data: [""],
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        type: "bar",
        barWidth: "22",
        z: 1,
        itemStyle: {
          normal: {
            color: "#14417B",
          },
        },
        data: [100],
      },
      {
        name: "正常",
        type: "pictorialBar",
        symbol: "round",
        symbolRepeat: true,
        symbolSize: [22, 5],
        symbolMargin: 1,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#049DE5", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0A58BF", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        label: {
          show: false,
        },
        data: [80],
      },
    ],
  };
  total: number = 0;
  AlarmInfData: AlarmInfType[] = [
    {
      name: "消防系统",
      type: "xfxt",
      value: "5",
    },
    {
      name: "安防系统",
      type: "afxt",
      value: "1",
    },
    {
      name: "在线监测系统",
      type: "zxjc",
      value: "11",
    },
    {
      name: "环境监测系统",
      type: "hjjc",
      value: "0",
    },
    {
      name: "联合巡检",
      type: "zdxs",
      value: "9",
    },
    {
      name: "算法分析服务",
      type: "gjfx",
      value: "12",
    },
    {
      name: "其他",
      type: "qt",
      value: "11",
    },
  ];
  mounted() {
    // this.getCountMap();
  }
  @Watch("countMap")
  // 告警信息统计
  getCountMap() {
    // this.loading = true;
    // (this as any).$services
    //   .getCountMap()
    //   .then((result: any) => {
    //     this.loading = false;
    //     let data = result.data;
    let data = this.countMap;
    this.total = data.total || 0;
    this.AlarmInfData[0].value = data.xfxt || 0;
    this.AlarmInfData[1].value = data.afxt || 0;
    this.AlarmInfData[2].value = data.zxjc || 0;
    this.AlarmInfData[3].value = data.hjjc || 0;
    this.AlarmInfData[4].value = data.zdxs || 0;
    this.AlarmInfData[5].value = data.gjfx || 0;
    this.AlarmInfData[6].value = data.qt || 0;
    // console.log(result);
    // })
    // .catch((err: object) => {
    //   this.loading = false;
    //   console.log(err);
    // });
  }
  clickEvent(item) {
    this.$emit("clickEvent", item);
  }
}
</script>

<style lang="scss" scoped>
.AlarmInf {
  width: 100%;
  height: 100%;
  .AlarmInf-con {
    width: 100%;
    height: calc(100% - 0.27rem);
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-image: url("../../../../assets/img/OperationMonitor/AlarmInf.png");
      background-size: 1.14rem 1.14rem;
      background-position: center center;
      background-repeat: no-repeat;
    }
    .AlarmInf-name {
      font-size: 0.14rem;
      color: #42c2fc;
    }
    .AlarmInf-rnumfont {
      padding-bottom: 0.06rem;
    }
  }
  .AlarmInf-con-total {
    background: none !important;
    display: flex;
    flex-direction: row !important;
    .pie {
      .echarts {
        width: 100%;
        height: 100%;
      }
    }
    > div {
      &:nth-child(1) {
        width: 0.16rem;
        height: 0.7rem;
        background: navy;
      }
      &:nth-child(2) {
        padding-left: 0.24rem;
        padding-right: 0.37rem;
        font-size: 0.24rem;
        color: #03ccff;
        > div {
          line-height: 0.35rem;
        }
        span {
          font-size: 0.16rem;
          color: #fff;
        }
      }
      &:nth-child(3) {
        width: 0.02rem;
        height: 0.7rem;
        background: linear-gradient(
          180deg,
          rgba(16, 115, 203, 0) 0%,
          rgba(16, 112, 197, 1) 47%,
          rgba(11, 130, 235, 0) 100%
        );
      }
    }
  }
  .rnumfont {
    color: #fff;
    font-weight: 400;
    font-size: 0.26rem;
  }
  .AlarmInf-con-rnumfont {
    font-size: 0.3rem;
  }
}
</style>

